<template>
  <div class="bat-button-out" @click="click">
    <div class="bat-button-inner">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "BatButton",
  props: ["content"],
  methods: {
    click() {
      this.$emit("click");
    },
  },
};
</script>
<style scoped lang="scss">
.bat-button-out {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 5px;
  background-image: linear-gradient(200deg, #fff, #5f5f5f);
  border-radius: 10px;
  margin: 0 5px 5px 0;
  cursor: pointer;
  .bat-button-inner {
    padding: 0 10px;
    height: 30px;
    background-image: linear-gradient(200deg, #5f5f5f, #fff 90%);
    line-height: 30px;
    font-size: 14px;
    font-weight: 700;
    color: #3f3f3f;
    text-align: center;
    border-radius: 5px;
  }
  &:hover{
    background-image: linear-gradient(220deg, #fff, #5f5f5f);
    .inner{
      background-image: linear-gradient(220deg, #5f5f5f, #fff 90%);
    }
  }
}
</style>